<template>
  <div class="not-found">
    <div class="not-found-block">
      <img src="../assets/img/404.jpg"
           alt="404notFound"
           class="not-found-img">
      <span class="not-found-content">
        <div class="font-bold">
          <div style="font-size: 34px;color: rgb(24,144,255);">Whoops!</div>
          <div style="font-size: 24px;margin-bottom: 15px;">页面好像走丢了，返回重新试试吧...</div>
          <div style="font-size: 14px;font-weight: lighter;">请检查您输入的URL是否正确，或单击下面的按钮返回主页。</div>
        </div>
        <a-button type="primary"
                  style="border-radius: 20px;margin-top: 20px;"
                  @click="$router.back()">
          返回上一页
        </a-button>
      </span>
    </div>
  </div>
</template>

<script>
export default {
  name: "NotFound"
}
</script>

<style lang="scss" scoped>
.not-found {
  width: 100%;

  .not-found-block {
    width: 1050px;
    padding-top: 150px;
    margin-left: 150px;
    position: relative;
    overflow-y: hidden;

    .not-found-img {
      width: 850px;
    }

    .not-found-content {
      position: absolute;
      right: 0;
      width: 350px;

      .font-bold {
        font-weight: bold;
      }
    }
  }
}
</style>